iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Vue.js

重新認識 Vue.js系列 第 16

重新認識 Vue.js Day16: keep alive

  • 分享至 

  • xImage
  •  

在 Vue 當中,當一個元件在被銷毀後,其內部的狀態都會被移除,但是當我們想要製作一些像是列表或是搜尋表格時我們希望能夠保持他的狀態,不要每次都會被清空,這時候我們就可以使用 keep-alive 來處理這問題

<keep-alive>
    <component></component>
</keep-alive>

並且我們還可以透過 include 以及 exclude 來對我們想要包含的組件進行篩選
其中有這三種表達式,基本上都是以元件的 name 進行匹配

  • <keep-alive include="a, b"></keep-alive>: 單純輸入字串
  • <keep-alive exclude="/a|b/"></keep-alive>: 輸入正則表達式
  • <keep-alive include="['a', 'b']"></leep-alive>: 輸入陣列

並且還可以透過 max 屬性來限制最大緩存量,若超過了這個數值將會從最久沒有觸發的元件開始重置

<keep-alive max="10"></leep-alive>

除了這些之外,keep-alive 還提供了兩個鉤子函式 onActivated 以及 onDeactivated,分別代表元件觸發以及元件離開,需要注意的是,這兩個鉤子同時也會與 mounted 和 destoryed 兩個鉤子同時觸發


上一篇
重新認識 Vue.js Day15: 額外函式
下一篇
重新認識 Vue.js Day17: 動態組件與具名插槽
系列文
重新認識 Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言